<template>
    <div class="question-display-container">
        <div v-if="questions.length === 0" class="no-questions">
            <el-empty description="暂无题目数据">
                <el-icon style="font-size: 48px; color: #c0c4cc;">
                    <i class="el-icon-document"></i>
                </el-icon>
            </el-empty>
        </div>

        <div v-else class="questions-wrapper">
            <!-- 题目类型标题 -->
            <div class="question-type-header">
                <el-tag :type="getQuestionTypeTagType(questionType)" size="large">
                    {{ getQuestionTypeLabel(questionType) }}
                </el-tag>
                <span class="question-count">共 {{ questions.length }} 题</span>
            </div>

            <!-- 单选题展示 -->
            <div v-if="questionType === 'choice'" class="choice-questions">
                <div v-for="(question, index) in questions" :key="index" class="question-item">
                    <div class="question-header">
                        <span class="question-number">第 {{ index + 1 }} 题</span>
                        <el-tag size="mini" type="info">{{ question.point }}</el-tag>
                    </div>
                    <div class="question-content">
                        <p class="question-text">{{ question.question }}</p>
                        <div class="choices">
                            <div v-for="(choice, choiceIndex) in question.choose" :key="choiceIndex" class="choice-item"
                                :class="{ 'correct-answer': choice === question.answer }">
                                <span class="choice-label">{{ choice }}</span>
                                <el-icon v-if="choice === question.answer" class="correct-icon">
                                    <i class="el-icon-check"></i>
                                </el-icon>
                            </div>
                        </div>
                        <div class="answer-info">
                            <strong>正确答案：</strong>{{ question.answer }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 判断题展示 -->
            <div v-if="questionType === 'TF'" class="tf-questions">
                <div v-for="(question, index) in questions" :key="index" class="question-item">
                    <div class="question-header">
                        <span class="question-number">第 {{ index + 1 }} 题</span>
                        <el-tag size="mini" type="info">{{ question.point }}</el-tag>
                    </div>
                    <div class="question-content">
                        <p class="question-text">{{ question.question }}</p>
                        <div class="tf-options">
                            <div class="tf-option" :class="{ 'correct-answer': question.answer === true }">
                                <span>正确</span>
                                <el-icon v-if="question.answer === true" class="correct-icon">
                                    <i class="el-icon-check"></i>
                                </el-icon>
                            </div>
                            <div class="tf-option" :class="{ 'correct-answer': question.answer === false }">
                                <span>错误</span>
                                <el-icon v-if="question.answer === false" class="correct-icon">
                                    <i class="el-icon-check"></i>
                                </el-icon>
                            </div>
                        </div>
                        <div class="answer-info">
                            <strong>正确答案：</strong>{{ question.answer ? '正确' : '错误' }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 填空题展示 -->
            <div v-if="questionType === 'fill'" class="fill-questions">
                <div v-for="(question, index) in questions" :key="index" class="question-item">
                    <div class="question-header">
                        <span class="question-number">第 {{ index + 1 }} 题</span>
                        <el-tag size="mini" type="info">{{ question.point }}</el-tag>
                    </div>
                    <div class="question-content">
                        <p class="question-text">{{ question.question }}</p>
                        <div class="fill-answers">
                            <div class="answer-label">参考答案：</div>
                            <div class="answers-list">
                                <el-tag v-for="(answer, answerIndex) in question.answer" :key="answerIndex"
                                    type="success" class="answer-tag">
                                    {{ answer }}
                                </el-tag>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 简答题展示 -->
            <div v-if="questionType === 'answer'" class="answer-questions">
                <div v-for="(question, index) in questions" :key="index" class="question-item">
                    <div class="question-header">
                        <span class="question-number">第 {{ index + 1 }} 题</span>
                        <el-tag size="mini" type="info">{{ question.point }}</el-tag>
                    </div>
                    <div class="question-content">
                        <p class="question-text">{{ question.question }}</p>
                        <div class="answer-content">
                            <div class="answer-label">参考答案：</div>
                            <div class="answer-text">{{ question.answer }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div v-if="questions.length > 0" class="action-buttons">
            <el-button type="primary" icon="el-icon-download" @click="exportQuestions">
                导出题目
            </el-button>
            <el-button type="success" icon="el-icon-edit" @click="editQuestions">
                编辑题目
            </el-button>
            <el-button type="info" icon="el-icon-view" @click="previewTest">
                预览测试
            </el-button>
        </div>

        <!-- 题目编辑器 -->
        <QuestionEditor :visible.sync="editorVisible" :questions="questions" :questionType="questionType"
            :questionConfig="questionConfig" :courseId="courseId" @save="handleEditSave" />
    </div>
</template>

<script>
import QuestionEditor from './QuestionEditor.vue';

export default {
    name: 'QuestionDisplay',
    components: {
        QuestionEditor
    },
    props: {
        questions: {
            type: Array,
            default: () => []
        },
        questionType: {
            type: String,
            required: true
        },
        questionConfig: {
            type: Object,
            default: () => ({})
        },
        courseId: {
            type: [String, Number],
            default: null
        }
    },
    data() {
        return {
            editorVisible: false
        }
    },
    methods: {
        // 获取题目类型标签文本
        getQuestionTypeLabel(type) {
            const typeMap = {
                'choice': '单选题',
                'TF': '判断题',
                'fill': '填空题',
                'answer': '简答题'
            };
            return typeMap[type] || '未知题型';
        },

        // 获取题目类型标签颜色
        getQuestionTypeTagType(type) {
            const typeMap = {
                'choice': 'primary',
                'TF': 'success',
                'fill': 'warning',
                'answer': 'info'
            };
            return typeMap[type] || 'info';
        },

        // 导出题目
        exportQuestions() {
            const data = {
                type: this.questionType,
                questions: this.questions,
                exportTime: new Date().toLocaleString()
            };

            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = `${this.getQuestionTypeLabel(this.questionType)}_${new Date().getTime()}.json`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(url);

            this.$message.success('题目导出成功！');
        },

        // 编辑题目
        editQuestions() {
            this.editorVisible = true;
        },

        // 处理编辑保存
        handleEditSave(data) {
            console.log('保存编辑的题目:', data);
            this.$emit('questions-updated', data);
            this.$message.success('题目编辑保存成功！');
        },

        // 预览测试
        previewTest() {
            this.$emit('preview-test', {
                type: this.questionType,
                questions: this.questions
            });
        }
    }
}
</script>

<style scoped>
.question-display-container {
    width: 100%;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.no-questions {
    text-align: center;
    padding: 60px 20px;
}

.questions-wrapper {
    width: 100%;
}

/* 题目类型标题 */
.question-type-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 16px;
    background: linear-gradient(135deg, #f6f9fc 0%, #e9f4ff 100%);
    border-radius: 8px;
    border: 1px solid #d9ecff;
}

.question-count {
    color: #666;
    font-size: 14px;
    font-weight: 500;
}

/* 题目项通用样式 */
.question-item {
    margin-bottom: 24px;
    padding: 20px;
    background: #fafbfc;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.question-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #409eff;
}

.question-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e4e7ed;
}

.question-number {
    font-weight: 600;
    color: #409eff;
    font-size: 16px;
}

.question-content {
    margin-top: 12px;
}

.question-text {
    font-size: 15px;
    line-height: 1.6;
    color: #303133;
    margin-bottom: 16px;
    font-weight: 500;
}

/* 选择题样式 */
.choices {
    margin-bottom: 16px;
}

.choice-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.choice-item:hover {
    border-color: #409eff;
    background: #f0f9ff;
}

.choice-item.correct-answer {
    background: #f0f9ff;
    border-color: #67c23a;
    color: #67c23a;
    font-weight: 500;
}

.choice-label {
    flex: 1;
}

.correct-icon {
    color: #67c23a;
    font-size: 16px;
}

/* 判断题样式 */
.tf-options {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.tf-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
    justify-content: center;
}

.tf-option:hover {
    border-color: #409eff;
    background: #f0f9ff;
}

.tf-option.correct-answer {
    background: #f0f9ff;
    border-color: #67c23a;
    color: #67c23a;
    font-weight: 500;
}

/* 填空题样式 */
.fill-answers {
    background: #fff;
    padding: 16px;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
}

.answer-label {
    font-weight: 500;
    color: #303133;
    margin-bottom: 8px;
}

.answers-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.answer-tag {
    padding: 6px 12px;
    font-size: 13px;
}

/* 简答题样式 */
.answer-content {
    background: #fff;
    padding: 16px;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
}

.answer-text {
    color: #606266;
    line-height: 1.6;
    padding: 8px 0;
    background: #f8f9fa;
    padding: 12px;
    border-radius: 4px;
    border-left: 4px solid #67c23a;
}

/* 答案信息 */
.answer-info {
    margin-top: 12px;
    padding: 8px 12px;
    background: #f0f9ff;
    border: 1px solid #b3d8ff;
    border-radius: 4px;
    color: #409eff;
    font-size: 14px;
}

/* 操作按钮 */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e4e7ed;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .question-display-container {
        padding: 16px;
    }

    .question-type-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .question-item {
        padding: 16px;
    }

    .tf-options {
        flex-direction: column;
    }

    .action-buttons {
        flex-direction: column;
        align-items: center;
    }

    .action-buttons .el-button {
        width: 100%;
        max-width: 200px;
    }
}

/* 滚动条样式 */
.question-display-container::-webkit-scrollbar {
    width: 6px;
}

.question-display-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.question-display-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.question-display-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
</style>
